<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <!--优惠券静态-->
    <div class="coupon" v-if="datas.coupons_color">
      <template v-if="datas.get_style == 2">
        <div style="text-align: center;font-size: 16px;height: 50px;line-height: 50px" v-if="coupons_list.length<=0">
          暂无设置优惠券
        </div>
        <!-- 样式一，一张购物卷 -->
        <div class="coupon_one" v-if="coupons_list.length === 1 && datas.coupons_style == '1'">
          <div class="couponBox">
            <div class="couponLeft">
              <span style="font-size: 26px;font-weight: bold">{{coupons_list[0].coupon_method == 1?`￥${coupons_list[0].deduct}`:`${coupons_list[0].discount}折`}}</span>
              <div class="couponName">
                <span style="font-size: 16px;">{{coupons_list[0].name}}</span>
                <span>{{coupons_list[0].enough == 0 ? '无门槛' : `满${coupons_list[0].enough}立减`}}</span>
              </div>
            </div>
            <div class="coouponRight">
              <div class="line">
                <div class="crl"></div>
                <div class="crl"></div>
              </div>
              <span style="font-size: 18px">立即领取</span>
              <div class="cir_top"></div>
              <div class="cir_bottom"></div>
            </div>
          </div>
        </div>
        <div class="coupon_two" v-if="coupons_list.length === 1 && datas.coupons_style == '2'">
          <div class="cir_top"></div>
          <div class="cir_bottom"></div>
          <div class="cir_topLeft"></div>
          <div class="cir_bottomRight"></div>
          <div class="couponBox">
            <div class="linebox">
              <div class="couponLeft">
                <span style="font-size: 24px;font-weight: bold">{{coupons_list[0].coupon_method == 1?`￥${coupons_list[0].deduct}`:`${coupons_list[0].discount}折`}}</span>
                <div class="couponName">
                  <span style="font-size: 16px;">{{coupons_list[0].name}}</span>
                  <span>{{coupons_list[0].enough == 0 ? '无门槛' : `满${coupons_list[0].enough}立减`}}</span>
                </div>
              </div>
              <div class="coouponRight">
                <div class="line"></div>
                <span style="font-size: 18px">立即领取</span>
              </div>
            </div>
          </div>
        </div>
        <div class="coupon_thr" v-if="coupons_list.length === 1 && datas.coupons_style == '3'">
          <div class="couponBox">
            <div class="couponLeft">
              <span style="font-size: 24px;font-weight: bold">{{coupons_list[0].coupon_method == 1?`￥${coupons_list[0].deduct}`:`${coupons_list[0].discount}折`}}</span>
              <div class="couponName">
                <span style="font-size: 16px;">{{coupons_list[0].name}}</span>
                <span>{{coupons_list[0].enough == 0 ? '无门槛' : `满${coupons_list[0].enough}立减`}}</span>
              </div>
            </div>
            <div class="coouponRight">
              <span>立即领取</span>
            </div>
          </div>
        </div>
      </template>

      <template v-if="coupons_list.length > 1 && datas.get_style == 2">
        <!-- 样式一，两张购物卷 -->
        <div class="one_coupon_one ofset" v-if="datas.coupons_style == '1'">
          <div class="couponBox" v-for="(item, index) in coupons_list" :key="index">
            <div class="couponLeft">
              <span style="font-size: 28px;margin-bottom: 8px;line-height: 28px">{{item.coupon_method == 1?`￥${item.deduct}`:`${item.discount}折`}}</span>
              <div class="couponName">
                <span>{{item.enough == 0 ? '无门槛' : `满${item.enough}立减`}}</span>
              </div>
            </div>
            <div class="coouponRight">
              <div class="line">
                <div class="crl"></div>
                <div class="crl"></div>
              </div>
              <div class="rigbox">
                <div style="width: 14px">
                  <span>立即领取</span>
                </div>
              </div>
              <div class="cir_top"></div>
              <div class="cir_bottom"></div>
            </div>
          </div>
        </div>
        <!-- 样式二，两张购物卷 -->
        <div class="two_coupon_two ofset" v-if="datas.coupons_style == '2'">
          <div class="couponBox" v-for="(item, index) in coupons_list" :key="index">
            <div class="cir_top"></div>
            <div class="cir_bottom"></div>
            <div class="cir_topLeft"></div>
            <div class="cir_bottomRight"></div>
            <div class="linebox">
              <div class="couponLeft">
                <span style="font-size: 28px;margin-bottom: 8px;line-height: 28px">{{item.coupon_method == 1?`￥${item.deduct}`:`${item.discount}折`}}</span>
                <div class="couponName">
                  <span>{{item.enough == 0 ? '无门槛' : `满${item.enough}立减`}}</span>
                </div>
              </div>
              <div class="coouponRight">
                <div class="line"></div>
                <div class="rigbox">
                  <div style="width: 14px">
                    <span>立即领取</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 样式三，两张购物卷 -->
        <div class="thr_coupon_thr ofset" v-if="datas.coupons_style == '3'">
          <div class="couponBox" v-for="(item, index) in coupons_list" :key="index">
            <div class="couponLeft">
              <span style="font-size: 28px;margin-bottom: 8px;line-height: 28px">{{item.coupon_method == 1?`￥${item.deduct}`:`${item.discount}折`}}</span>
              <div class="couponName">
                <span>{{item.enough == 0 ? '无门槛' : `满${item.enough}立减`}}</span>
              </div>
            </div>
            <div class="coouponRight">
              <span>领</span>
            </div>
          </div>
        </div>
      </template>

      <template v-if="datas.get_style == 1">
        <div style="text-align: center;font-size: 16px;height: 50px;line-height: 50px" v-if="Number(datas.get_number) <=0">
          暂无设置优惠券
        </div>

        <div v-if="Number(datas.get_number) == 1">
          <div class="coupon_one" v-if="datas.coupons_style == '1'">
            <div class="couponBox">
              <div class="couponLeft">
                <span style="font-size: 26px;font-weight: bold">￥xx.xx</span>
                <div class="couponName">
                  <span style="font-size: 16px;">优惠券名称</span>
                  <span>满xx立减</span>
                </div>
              </div>
              <div class="coouponRight">
                <div class="line">
                  <div class="crl"></div>
                  <div class="crl"></div>
                </div>
                <span style="font-size: 18px">立即领取</span>
                <div class="cir_top"></div>
                <div class="cir_bottom"></div>
              </div>
            </div>
          </div>
          <div class="coupon_two" v-if="datas.coupons_style == '2'">
            <div class="cir_top"></div>
            <div class="cir_bottom"></div>
            <div class="cir_topLeft"></div>
            <div class="cir_bottomRight"></div>
            <div class="couponBox">
              <div class="linebox">
                <div class="couponLeft">
                  <span style="font-size: 24px;font-weight: bold">￥xx.xx</span>
                  <div class="couponName">
                    <span style="font-size: 16px;">优惠券名称</span>
                    <span>满xx立减</span>
                  </div>
                </div>
                <div class="coouponRight">
                  <div class="line"></div>
                  <span style="font-size: 18px">立即领取</span>
                </div>
              </div>
            </div>
          </div>
          <div class="coupon_thr" v-if="datas.coupons_style == '3'">
            <div class="couponBox">
              <div class="couponLeft">
                <span style="font-size: 24px;font-weight: bold">￥xx.xx</span>
                <div class="couponName">
                  <span style="font-size: 16px;">优惠券名称</span>
                  <span>满xx立减</span>
                </div>
              </div>
              <div class="coouponRight">
                <span>立即领取</span>
              </div>
            </div>
          </div>
        </div>

        <div v-if="Number(datas.get_number) > 1">
          <!-- 样式一，两张购物卷 -->
          <div class="one_coupon_one ofset" v-if="datas.coupons_style == '1'">
            <div class="couponBox" v-for="(item, index) in Number(datas.get_number)" :key="index">
              <div class="couponLeft">
                <span style="font-size: 28px;margin-bottom: 8px;line-height: 28px">￥xx.xx</span>
                <div class="couponName">
                  <span>满xx立减</span>
                </div>
              </div>
              <div class="coouponRight">
                <div class="line">
                  <div class="crl"></div>
                  <div class="crl"></div>
                </div>
                <div class="rigbox">
                  <div style="width: 14px">
                    <span>立即领取</span>
                  </div>
                </div>
                <div class="cir_top"></div>
                <div class="cir_bottom"></div>
              </div>
            </div>
          </div>
          <!-- 样式二，两张购物卷 -->
          <div class="two_coupon_two ofset" v-if="datas.coupons_style == '2'">
            <div class="couponBox" v-for="(item, index) in Number(datas.get_number)" :key="index">
              <div class="cir_top"></div>
              <div class="cir_bottom"></div>
              <div class="cir_topLeft"></div>
              <div class="cir_bottomRight"></div>
              <div class="linebox">
                <div class="couponLeft">
                  <span style="font-size: 28px;margin-bottom: 8px;line-height: 28px">￥xx.xx</span>
                  <div class="couponName">
                    <span>满xx立减</span>
                  </div>
                </div>
                <div class="coouponRight">
                  <div class="line"></div>
                  <div class="rigbox">
                    <div style="width: 14px">
                      <span>立即领取</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 样式三，两张购物卷 -->
          <div class="thr_coupon_thr ofset" v-if="datas.coupons_style == '3'">
            <div class="couponBox" v-for="(item, index) in Number(datas.get_number)" :key="index">
              <div class="couponLeft">
                <span style="font-size: 28px;margin-bottom: 8px;line-height: 28px">￥xx.xx</span>
                <div class="couponName">
                  <span>满xx立减</span>
                </div>
              </div>
              <div class="coouponRight">
                <span>领</span>
              </div>
            </div>
          </div>
        </div>

      </template>
    </div>
  </div>
</template>

<script>
	import emptyImage from "@/resource/images/image.png";
// 自定义样式
const css = function() {
	if(this.datas.coupons_color) {
		const {
			preview_color,
			coupons_font_color,
			coupons_color,
			coupons_border_color
		} = this.datas;

		return `
        .component-${this.id} .coupon_one, .component-${this.id} .coupon_two, .component-${this.id} .coupon_thr, .component-${this.id} .one_coupon_one,
        .component-${this.id}  .two_coupon_two, .component-${this.id} .thr_coupon_thr, .component-${this.id} .coupon .cir_top,
         .component-${this.id} .coupon .cir_bottom, .component-${this.id} .coupon .cir_topLeft, .component-${this.id} .coupon .cir_bottomRight{
            background-color: ${preview_color};
        }
        .component-${this.id} .couponBox{
            background-color: ${coupons_color.color};
            background-image: url(${coupons_color.isColor == 2 ? coupons_color.image || emptyImage : ''});
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            color: ${coupons_font_color};
        }
        .component-${this.id} .one_coupon_one .couponName, .component-${this.id} .two_coupon_two .couponName {
            border-top: 1px solid ${coupons_border_color};
        }

        .component-${this.id} .thr_coupon_thr .couponName{
            border-top: 1px dotted ${coupons_border_color};
        }

        .component-${this.id} .thr_coupon_thr .coouponRight, .component-${this.id} .coupon_thr .coouponRight{
            background-color: ${coupons_border_color};
        }

        .component-${this.id} .coupon_one .line, .component-${this.id} .coupon_two .line, .component-${this.id} .one_coupon_one .line,
        .component-${this.id}  .two_coupon_two .line {
            border: dotted ${coupons_border_color} 2px;
        }

        .component-${this.id} .coupon_two .linebox, .component-${this.id}  .two_coupon_two .linebox{
            border: solid 1px ${coupons_border_color};
        }

    `;
	}
};

export default {
  data() {
    return {
    };
  },
  props: ["id", "datas", "styles"],
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
	  coupons_list() {
    	return this.datas.list;
    }
  },

  methods: {
  },

  mounted() {
    this.$emit("loaded");
  }
};
</script>

<style lang="less" scoped>
	// 默认
	*{
		list-style-type: none;
	}
  .component-wrapper {
    width: 375px;
	}
	.ofset{
		overflow-x: scroll;
	}
	.thr_coupon_thr{
		width: 100%;
		padding: 10px 0;
		display: flex;
		white-space: nowrap;
		.couponBox{
			width: 180px;
			height: 75px;
			/*background: #b6b6b6;*/
			border-radius: 0px 37.5px 37.5px 0;
			margin:0 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			.couponLeft{
				// margin-left: 16.5px;
				height: 100%;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				margin-right: 7px;
        flex: 1;
				.couponName{
					display: flex;
					flex-direction: column;
          font-size: 12px;
					/*border-top: 1px dotted #ebebee;*/
					// margin-left: 18px;
				}
			}
			.coouponRight{
				width: 50px;
				height: 50px;
        font-size: 16px;
        flex: 0 0 50px;
        margin-right: 10px;
				/*background: #ffffff;*/
				position: relative;
				display: flex;
				align-items: center;
				border-radius: 50%;
				justify-content: center;
			}
		}
	}
	.two_coupon_two{
		width: 100%;
		// height: 92px;
		/*background: #ffffff;*/
		padding: 10px 0;
		display: flex;
		white-space: nowrap;
		.couponBox{
			position: relative;
			width: 170px;
			height: 75px;
			/*background: #b6b6b6;*/
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin:0 10px;
			padding: 4px;
			flex-shrink: 0;
			.cir_top{
				position: absolute;
				z-index: 2;
				width: 14px;
				height: 14px;
				/*background: #ffffff;*/
				border-radius: 50%;
				left: -3px;
				top: -3px;
			}
			.cir_bottom{
				position: absolute;
				z-index: 2;
				width: 14px;
				height: 14px;
				/*background: #ffffff;*/
				border-radius: 50%;
				left: -3px;
				bottom: -3px;
			}
			.cir_topLeft{
				position: absolute;
				z-index: 2;
				width: 14px;
				height: 14px;
				/*background: #ffffff;*/
				border-radius: 50%;
				right: -3px;
				top: -3px;
			}
			.cir_bottomRight{
				position: absolute;
				z-index: 2;
				width: 14px;
				height: 14px;
				/*background: #ffffff;*/
				border-radius: 50%;
				right: -3px;
				bottom: -3px;
			}
			.linebox{
				// margin-left: 16.5px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 100%;
				/*border: solid 1px #e3e3e3;*/
			}
			.couponLeft{
				width: 127px;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.couponName{
					display: flex;
					flex-direction: column;
					/*border-top: 1px solid #ffffff;*/
				}
			}
			.coouponRight{
				position: relative;
				width: 40px;
				display: flex;
				height: 100%;
				align-items: center;
				.rigbox{
					width: 100%;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
					line-height: 100%;
					white-space: pre-wrap;
				}
				.line{
					height: 90%;
					width: 2px;
					/*border: dotted  #ffffff 2px;*/
					border-radius: 1px;
				}
			}
		}
	}
	.one_coupon_one{
		width: 100%;
		// height: 92px;
		/*background: #ffffff;*/
		padding: 10px 0;
		display: flex;
		.couponBox{
			width: 170px;
			height: 75px;
			/*background: #b6b6b6;*/
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin:0 10px;
			.couponLeft{
				width: 127px;
				flex: 1;
				display: flex;
				align-items: center;
				flex-direction: column;
				.couponName{
					display: flex;
					flex-direction: column;
					/*border-top: 1px solid #ffffff;*/
				}
			}
			.coouponRight{
				position: relative;
				width: 40px;
				// margin-right: 22.5px;
				display: flex;
				height: 100%;
				align-items: center;
				.rigbox{
					width: 100%;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
					line-height: 100%;
				}
				.cir_top{
					position: absolute;
					z-index: 2;
					width: 14px;
					height: 14px;
					/*background: #ffffff;*/
					border-radius: 50%;
					left: -5px;
					top: -7px;
				}
				.cir_bottom{
					position: absolute;
					z-index: 2;
					width: 14px;
					height: 14px;
					/*background: #ffffff;*/
					border-radius: 50%;
					left: -5px;
					bottom: -7px;
				}
				.line{
					height: 70%;
					// width: 2px;
					/*border: dotted  #ffffff 1px;*/
					border-radius: 1px;
				}
			}
		}
	}
	.coupon_one{
		width: 100%;
		// height: 92px;
		/*background: #ffffff;*/
		overflow: hidden;
		padding: 10px 0;
		.couponBox{
			width: 95%;
			height: 75px;
			/*background: #b6b6b6;*/
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin:0 10px;
			.couponLeft{
				margin-left: 16.5px;
				display: flex;
				align-items: center;
        font-size: 14px;
				.couponName{
					display: flex;
					flex-direction: column;
					margin-left: 18px;
				}
			}
			.coouponRight{
				position: relative;
				margin-right: 22.5px;
				display: flex;
				height: 100%;
				align-items: center;
				.cir_top{
					position: absolute;
					z-index: 2;
					width: 14px;
					height: 14px;
					/*background: #ffffff;*/
					border-radius: 50%;
					left: -5px;
					top: -7px;
				}
				.cir_bottom{
					position: absolute;
					z-index: 2;
					width: 14px;
					height: 14px;
					/*background: #ffffff;*/
					border-radius: 50%;
					left: -5px;
					bottom: -7px;
				}
				.line{
					height: 100%;
					width: 2px;
					/*border: dotted  #ffffff 2px;*/
					border-radius: 1px;
				}
				span{
					margin-left: 23px;
				}
			}
		}
	}

	.coupon_two{
		width: 100%;
		// height: 92px;
		/*background: #ffffff;*/
		overflow: hidden;
		padding: 10px 0;
		position: relative;
		.cir_top{
			position: absolute;
			z-index: 2;
			width: 14px;
			height: 14px;
			/*background: #ffffff;*/
			border-radius: 50%;
			left: 5px;
			top: 5px;
		}
		.cir_bottom{
			position: absolute;
			z-index: 2;
			width: 14px;
			height: 14px;
			/*background: #ffffff;*/
			border-radius: 50%;
			left: 5px;
			bottom: 5px;
		}
		.cir_topLeft{
			position: absolute;
			z-index: 2;
			width: 14px;
			height: 14px;
      font-size: 14px;
			/*background: #ffffff;*/
			border-radius: 50%;
			right: 5px;
			top: 5px;
		}
		.cir_bottomRight{
			position: absolute;
			z-index: 2;
			width: 14px;
			height: 14px;
			/*background: #ffffff;*/
			border-radius: 50%;
			right: 5px;
			bottom: 5px;
		}
		.couponBox{
			width: 95%;
			height: 75px;
			/*background: #b6b6b6;*/
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin:0 10px;
			padding: 4px;
			.linebox{
				// margin-left: 16.5px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 100%;
				/*border: solid 1px #ffffff;*/
			}
			.couponLeft{
				margin-left: 12.5px;
				display: flex;
				align-items: center;
				.couponName{
					display: flex;
					flex-direction: column;
					margin-left: 18px;
				}
			}
			.coouponRight{
				margin-right: 18.5px;
				display: flex;
				height: 100%;
				align-items: center;
				.line{
					height: 90%;
					width: 2px;
					/*border: dotted  #ffffff 2px;*/
					border-radius: 1px;
				}
				span{
					margin-left: 23px;
				}
			}
		}
	}

	.coupon_thr{
		width: 100%;
		padding: 10px 0;
		.couponBox{
			// widows: 100%;
			height: 75px;
			/*background: #b6b6b6;*/
			border-radius: 0px 37.5px 37.5px 0;
			margin:0 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.couponLeft{
				margin-left: 16.5px;
				display: flex;
				align-items: center;
				.couponName{
					display: flex;
					flex-direction: column;
					margin-left: 18px;
				}
			}
			.coouponRight{
				padding: 10px 14px;
				/*background: #ffffff;*/
				position: relative;
				margin-right: 22.5px;
				display: flex;
				align-items: center;
				border-radius: 20px;
			}
		}
	}


</style>
